<template>
	<view class="container">
		<!-- 	<u-sticky>
			<view class="search">
				<u-search :show-action="false" placeholder="请输入搜索内容" @custom="show = true" v-model="keyword"></u-search>
			</view>
		</u-sticky> -->
		<u-gap v-if="slides != ''" height="10"></u-gap>
		<view class="swiper">
			<!-- <u-swiper bg-color="#fff" border-radius="20" height="280" :list="list"></u-swiper> -->
			<!-- <swiper indicator-dots autoplay circular>
				<swiper-item v-for="(item,index) in list">
					<view class="swiper-item">
							<u-image width="100%" border-radius="20" :src="item.image" height="280"></u-image>
					</view>
				</swiper-item>
			</swiper> -->
			<view class="swiper" v-if="slides != ''">
				<!-- <u-swiper @click="preview" bg-color="#fff" effect3d height="400" border-radius="20" :list="storeInfo.imgIndoor"></u-swiper> -->
				<swiper circular autoplay indicator-dots indicator-active-color="#fff">
					<swiper-item v-for="(item, index) in slides" :key="index">
						<view class="swiper-item"><u-image border-radius="20" width="100%" height="280" :src="item" /></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<u-gap v-if="slides != ''"></u-gap>
		<view
			class="list"
			:style="{
				'padding-top': slides == '' ? '0rpx' : '20rpx'
			}"
		>
			<view
				:class="['title', tabsIndex == index ? 'active' : '']"
				@click="
					tabsIndex = index;
					choiceTab(index);
				"
				v-for="(item, index) in tabs"
				:key="index"
			>
				{{ item }}
			</view>
			<view class="set-meal-choices" v-if="tabsIndex == 0">
				<scroll-view scroll-x>
					<view
						@click="
							setMealChoiceIndex = index == setMealChoiceIndex ? null : index;
							choiceSetMealChoices(item.classValue);
						"
						:class="['item', index == setMealChoiceIndex ? 'active' : '']"
						v-for="(item, index) in setMealChoices"
						:key="index"
					>
						{{ item.classLabel }}
					</view>
				</scroll-view>
			</view>
			<view class="wrap">
				<u-waterfall v-model="flowList" ref="uWaterfall" v-if="flowList != ''">
					<template v-slot:left="{ leftList }">
						<view
							class="warter"
							v-for="(item, index) in leftList"
							:key="index"
							@click="
								$u.route('/pages/other/setmeal/setmeal', {
									id: item.id,
									type: tabsIndex == 0 ? 'setMeal' : 'coupon',
									coordinate: coordinate
								})
							"
						>
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<u-lazy-load :image="item.sharePackageImg" :index="index"></u-lazy-load>
							<view class="info">
								<view class="title">{{ item.title }}</view>
								<view class="tag">
									<view>
										<view>分享返</view>
										<view>￥{{ item.shareRebateFee }}</view>
									</view>
								</view>
								<view class="money">
									<view>
										<text class="symbol">￥</text>
										{{ item.packagePrice }}
										<text class="original-price">原价:￥{{ item.orignPrice }}</text>
									</view>
									<view><u-icon name="arrow-right" color="#aaa"></u-icon></view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{ rightList }">
						<view
							class="warter"
							v-for="(item, index) in rightList"
							:key="index"
							@click="
								$u.route('/pages/other/setmeal/setmeal', {
									id: item.id,
									type: tabsIndex == 0 ? 'setMeal' : 'coupon',
									coordinate: coordinate
								})
							"
						>
							<!-- threshold="-450" -->
							<u-lazy-load :image="item.sharePackageImg" :index="index"></u-lazy-load>
							<view class="info">
								<view class="title">{{ item.title }}</view>
								<view class="tag">
									<view>
										<view>分享返</view>
										<view>￥{{ item.shareRebateFee }}</view>
									</view>
								</view>
								<view class="money">
									<view>
										<text class="symbol">￥</text>
										{{ item.packagePrice }}
										<text class="original-price">原价:￥{{ item.orignPrice }}</text>
									</view>
									<view><u-icon name="arrow-right" color="#aaa"></u-icon></view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
				<u-gap height="20"></u-gap>
				<u-loadmore :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
				<!-- <view v-if="flowList == '' && loadStatus != 'loading'" style="padding-top: 200rpx;"><u-empty mode="list"></u-empty></view> -->
			</view>
		</view>
		<u-gap></u-gap>
		<u-back-top
			:icon-style="{ width: '44px', height: '44px' }"
			:custom-style="{ 'background-color': 'transparent' }"
			:icon="appletImgUrl+'btn_UpToTop.png'"
			:scroll-top="scrollTop"
		></u-back-top>
		<view class="safe-area-inset-bottom"></view>
		<!-- 		<u-popup border-radius="40" v-model="show" mode="top">
			<view class="popup">
				<view class="title">
					筛选
				</view>
				<view class="item-box">
					<view class="item">
						优惠套餐
					</view>
					<view class="item">
						优惠券
					</view>
					<view class="item">
						折扣券
					</view>
					<view class="item">
						全部
					</view>
				</view>
				<view class="btn">
					确定
				</view>
			</view>
		</u-popup> -->
		<!-- <view class="tabbar">
			<u-tabbar
				:before-switch="tabChange"
				:show="tabBarState"
				inactive-color="#A5A4A4"
				active-color="#333333"
				icon-size="36"
				:list="tabBarList"
				mid-button
				mid-button-size="104"
				:border-top="false"
			></u-tabbar>
		</view> -->
	</view>
</template>
<script>
import {appletImgUrl} from "@/common/config.js"
import WSCoordinate from '@/js_sdk/WSCoordinate';
export default {
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	},
	data() {
		return {
			appletImgUrl:appletImgUrl,
			loadStatus: 'loading',
			show: false,
			scrollTop: 0,
			flowList: [],
			tabsIndex: 0,
			coordinate: '',
			setMealChoiceIndex: null,
			tabs: ['优惠套餐', '优惠券'],
			setMealChoices: [],
			list: [
				{
					image: 'https://photo.hiyipin.net/ADVERT/44148dc3-edde-4e24-88dc-038f2cc0b946.png'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
				}
			],
			tabBarState: false,
			keyword: '',
			slides: [],
			// tabBarList: [
			// 	{
			// 		pagePath: '/pages/tabBar/index/index',
			// 		iconPath: '/static/index-tab.png',
			// 		selectedIconPath: '/static/index-tabActive.png',
			// 		text: '首页'
			// 	},
			// 	{
			// 		pagePath: '/pages/purchase/goodsType/goodsType',
			// 		iconPath: '/static/shop-tab.png',
			// 		selectedIconPath: '/static/shop-tabActive.png',
			// 		text: '分类'
			// 	},
			// 	{
			// 		iconPath: '/static/main-tab-bar-icon.png',
			// 		selectedIconPath: '/static/main-tab-bar-icon.png',
			// 		pagePath: '/pages/tabBar/newIndex/newIndex',
			// 		midButton: true
			// 	},
			// 	{
			// 		pagePath: '/pages/user/goodsCart/goodsCart',
			// 		iconPath: '/static/order-tab.png',
			// 		selectedIconPath: '/static/order-tabActive.png',
			// 		text: '购物车'
			// 	},
			// 	{
			// 		pagePath: '/pages/tabBar/my/my',
			// 		iconPath: '/static/my-tab.png',
			// 		selectedIconPath: '/static/my-tabActive.png',
			// 		text: '个人'
			// 	}
			// ]
		};
	},
	onReady() {
		// this.$nextTick(() => {
		// 	this.tabBarState = true;
		// });
	},
	onPullDownRefresh() {
		this.flowList = [];
		this.loadStatus = 'loading';
		this.pageNo = 1;

		this.getData(res => {
			this.$nextTick(() => {
				this.loadStatus = res.length < 10 ? 'nomore' : 'loadmore';
				uni.stopPullDownRefresh();
			});
		});
	},
	onLoad() {
		this.$u.get('sharepackage/listSharePackageClass').then(res => {
			this.setMealChoices = res;
		});
		this.pageNo = 1;
		this.classValue = null;
		const self = this;
		this.$u
			.post('appadvertmanagement/carouselPic', {
				advertType: 8,
				deviceType: 3
			})
			.then(res => {
				if (res != '') {
					self.slides = res.map((item, index) => {
						return this.imageURL + item.photoUrl;
					});
				} else {
				}
			});

		// #ifdef MP-WEIXIN
		uni.getLocation({
			type: 'gcj02',
			altitude: true,
			success(res) {
				self.latitude = res.latitude;
				self.longitude = res.longitude;
				let BD_Coordinate = WSCoordinate.transformFromGCJToBaidu(self.latitude, self.longitude);
				self.coordinate = JSON.stringify({
					latitude: BD_Coordinate.latitude,
					longitude: BD_Coordinate.longitude
				});
				self.getData(res => {
					self.loadStatus = res.length < 10 ? 'nomore' : 'loadmore';
				});
			}
		});
		//#endif
		//#ifdef H5
		self.getData(res => {
			self.loadStatus = res.length < 10 ? 'nomore' : 'loadmore';
		});
		//#endif
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.loadStatus == 'loading' || this.loadStatus == 'nomore') return;
		this.pageNo++;
		this.loadStatus = 'loading';
		this.getData(res => {
			if (res == '') {
				this.loadStatus = 'nomore';
				return;
			}
			this.loadStatus = 'loadmore';
		});
	},
	methods: {
		choiceTab() {
			this.flowList = [];
			this.loadStatus = 'loading';
			this.pageNo = 1;
			this.getData(res => {
				this.$nextTick(() => {
					this.loadStatus = res.length < 10 ? 'nomore' : 'loadmore';
				});
			});
		},
		choiceSetMealChoices(e) {
			this.flowList = [];
			this.loadStatus = 'loading';
			this.pageNo = 1;
			this.classValue = this.setMealChoiceIndex == null ? null : e;
			this.getData(res => {
				this.$nextTick(() => {
					this.loadStatus = res.length < 10 ? 'nomore' : 'loadmore';
				});
			});
		},
		getData(callback, cover = true) {
			let BD_Coordinate = WSCoordinate.transformFromGCJToBaidu(this.latitude, this.longitude);
			if (this.tabsIndex == 1) {
				this.$u
					.post('coupon/listCouponByNearly', {
						latitude: BD_Coordinate.latitude,
						longitude: BD_Coordinate.longitude,
						pageNo: this.pageNo,
						pageSize: 10
					})
					.then(res => {
						callback(res.list);
						if (res.list == '') return;
						res.list.forEach(i => {
							let transformationArray = i.couponImg.split(',');
							// item.goodsMainPhoto = this.imageURL + transformationArray[0]
							i.couponImg = this.imageURL + transformationArray[0];
							// i.couponImg = i.couponImg ? this.imageURL + i.couponImg : '/static/img-load-after.png'
						});

						let newList = res.list.map(item => {
							return {
								sharePackageImg: item.couponImg,
								shareRebateFee: item.shareRebateFee,
								packagePrice: item.price,
								orignPrice: item.priceOff,
								title: item.title,
								id: item.id
							};
						});
						this.flowList = this.flowList.concat(newList);
					})
					.catch(error => {
						uni.stopPullDownRefresh();
					});
				return;
			}
			this.$u
				.post('sharepackage/listByNearly', {
					latitude: BD_Coordinate.latitude,
					longitude: BD_Coordinate.longitude,
					classValue: this.classValue,
					pageNo: this.pageNo,
					pageSize: 10
				})
				.then(res => {
					callback(res.list);
					if (res.list == '') {
						return;
					}
					res.list.forEach(i => {
						let transformationArray = i.sharePackageImg.split(',');
						// item.goodsMainPhoto = this.imageURL + transformationArray[0]
						i.sharePackageImg = this.imageURL + transformationArray[0];
					});
					this.flowList = this.flowList.concat(res.list);
				})
				.catch(error => {
					uni.stopPullDownRefresh();
				});
		},
		remove(id) {
			this.$refs.uWaterfall.remove(id);
		},
		clear() {
			this.$refs.uWaterfall.clear();
		},
		tabChange(index) {
			if (index == 3 || index == 4) {
				if (uni.getStorageSync('userInfo')) {
					return true;
				} else {
					this.$u.route('/pages/user/login/login');
					return false;
				}
			} else {
				return true;
			}
		}
	}
};
</script>
<style lang="scss">
// .popup {
// 	padding-bottom: 50rpx;

// 	.btn {
// 		width: 280rpx;
// 		margin: 0 auto;
// 		line-height: 80rpx;
// 		background: linear-gradient(90deg, #FF7200, #FECD62);
// 		text-align: center;
// 		font-size: 30rpx;
// 		color: #fff;
// 		margin-top: 65rpx;
// 		border-radius: 40rpx;
// 	}

// 	.item-box {
// 		padding: 0 15rpx;

// 		.item {
// 			margin: 15rpx;
// 			text-align: center;
// 			display: inline-block;
// 			width: 210rpx;
// 			height: 80rpx;
// 			background-color: #F8F8F8;
// 			line-height: 80rpx;
// 			border-radius: 10rpx;
// 		}
// 	}

// 	.title {
// 		font-size: 36rpx;
// 		text-align: center;
// 		padding: 40rpx 0;
// 	}
// }

.container {
	.swiper {
		swiper {
			height: 280rpx;

			.swiper-item {
				padding: 0 30rpx;
				height: 100%;
			}
		}
	}

	.list {
		padding: 20rpx 0;

		.wrap {
			padding: 0 20rpx;
		}

		.set-meal-choices {
			margin: 30rpx 0;
			/* #ifdef MP-WEIXIN */
			margin-bottom: 10rpx;
			/* #endif */
			/* #ifdef H5 */
			margin-bottom: 20rpx;

			/* #endif */
			scroll-view {
				white-space: nowrap;

				.item {
					display: inline-block;
					line-height: 50rpx;
					background-color: #f8f8f8;
					padding: 0 15rpx;
					margin-left: 10rpx;

					&.active {
						background-color: rgba($color: #f4b802, $alpha: 0.1);
						color: #f4b802;
						font-weight: bold;
					}

					&:first-child {
						margin-left: 30rpx;
					}

					border-radius: 6rpx;

					&:last-child {
						margin-right: 30rpx;
					}
				}
			}
		}

		.warter {
			border-radius: 8px;
			box-shadow: 0px 5rpx 25rpx rgba(0, 0, 0, 0.1);
			/* #ifdef MP-WEIXIN */
			margin: 30rpx 10rpx;
			/* #endif */
			/* #ifdef H5 */
			margin: 15rpx 10rpx;
			/* #endif */
			background-color: #ffffff;
			position: relative;
			overflow: hidden;
			border-radius: 20rpx;
			z-index: 1;

			.info {
				padding: 20rpx;

				.money {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					> view {
						&:first-child {
							font-size: 40rpx;
							color: #ff4d46;
							font-weight: bold;

							text {
								&.symbol {
									font-size: 20rpx;
									font-weight: normal;
								}

								&.original-price {
									font-weight: normal;
									font-size: 22rpx;
									margin-left: 15rpx;
									color: #aaaaaa;
									text-decoration: line-through;
								}
							}
						}

						&:last-child {
							padding-bottom: 5rpx;
						}
					}
				}

				.tag {
					display: inline-block;
					height: 34rpx;
					margin: 15rpx 0;

					> view {
						view {
							display: inline-block;
							text-align: center;
							font-size: 24rpx;
							// flex: 1;
							padding: 0 10rpx;

							&:first-child {
								background-color: #ff4d46;
								border: 1rpx solid #ff4d46;
								transform: rotateZ(360deg);
								color: #fff;
								border-radius: 4rpx 0 0 4rpx;
							}

							&:last-child {
								color: #ff4d46;
								border: 1rpx solid #ff4d46;
								border-left: none;
								border-radius: 0 4rpx 4rpx 0;
								transform: rotateZ(360deg);
							}
						}
					}
				}

				.title {
					color: #333333;
				}
			}
		}

		> .title {
			font-size: 30rpx;
			position: relative;
			display: inline-block;
			margin-left: 30rpx;
			color: #aaaaaa;

			&.active {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;

				&::after {
					position: absolute;
					content: '';
					right: -5rpx;
					bottom: -2rpx;
					width: 30rpx;
					height: 30rpx;
					z-index: -1;
					background: linear-gradient(90deg, #ff7200, #fecd62);
					border-radius: 50%;
				}
			}
		}
	}

	.search {
		padding: 20rpx 30rpx;
		background-color: #fff;
	}
}

.tabbar {
	height: 100rpx;
	overflow: hidden;
}
</style>
